<h2>angular-bootstrap-nav-tree</h2>
<table width="100%">
  <tr>
    <td style="vertical-align:top">
      <table width="100%">
        <tr>
          <td style="vertical-align:top" colspan="2">
            <br>
            <button ng-click="try_changing_the_tree_data()" class="btn btn-default btn-sm">Change The Tree Definition</button>
            <button ng-click="try_async_load()" class="btn btn-default btn-sm">Load Tree Data Asynchronously</button>
            <h5>Test the Tree Control API:</h5><br>
            <button ng-click="my_tree.select_first_branch()" class="btn btn-default btn-sm">First Branch</button>
            <button ng-click="my_tree.select_next_sibling()" class="btn btn-default btn-sm">Next Sibling</button>
            <button ng-click="my_tree.select_prev_sibling()" class="btn btn-default btn-sm">Prev Sibling</button>
            <button ng-click="my_tree.select_next_branch()" class="btn btn-default btn-sm">Next Branch</button>
            <button ng-click="my_tree.select_prev_branch()" class="btn btn-default btn-sm">Prev Branch</button>
            <button ng-click="my_tree.select_parent_branch()" class="btn btn-default btn-sm">Parent</button>
            <button ng-click="my_tree.expand_branch()" class="btn btn-default btn-sm">Expand</button>
            <button ng-click="my_tree.collapse_branch()" class="btn btn-default btn-sm">Collapse</button>
            <button ng-click="my_tree.expand_all()" class="btn btn-default btn-sm">Expand All</button>
            <button ng-click="my_tree.collapse_all()" class="btn btn-default btn-sm">Collapse All</button>
            <button ng-click="try_adding_a_branch()" class="btn btn-default btn-sm">Add Branch</button>
          </td>
          </tr>
          <tr>
          <td style="padding:20px;width:250px;vertical-align:top">
            <div style="background:whitesmoke;border:1px solid lightgray;">
              <span ng-if="doing_async">...loading...</span>
              <abn-tree tree-data="my_data" tree-control="my_tree" on-select="my_tree_handler(branch)" expand-level="2" initial-selection="Granny Smith"></abn-tree>
            </div>
          </td>
          <td style="padding:20px;vertical-align:top;">
            {{ output }}
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>